<template>
	<view class="gradecode">
		<view class="title">仅展示生效中积分码，点击批次展示对应二维码</view>
		<noData v-if="batchList.length==0"></noData>
		<view v-else class="list">
			<view class="list_item" @click="batchClick(item)" v-for="(item,index) in batchList" :key="index">
				<view class="item_title">
					<view>{{item.batch_num}}</view>
					<image src="../../static/img/ic_jifencode.png"></image>
				</view>
				<view class="item_code">积分值  {{item.not_use_jifen}}</view>
				<view class="item_num">
					<view>已兑换  {{item.num-item.not_use_num}}</view>
					<view>未兑换<text class="redfont">{{item.not_use_num}}</text></view>
				</view>
				<view class="greyfont">有效期至{{timeForMat(item.expire_time)}}</view>
			</view>
		</view>
		<u-mask :show="show" @click="show = false" :mask-click-able="false">
			<view class="popup">
				<view class="popup_title">
					<view><text class="title_num">{{currentBatch.jifen}}</text>积分值</view>
					<view>积分码ID  {{currentBatch.id}}</view>
				</view>
				<view class="popup_con">
					<view class="popup_conTitle">此二维码有效期至{{timeForMat(currentBatch.expire_time)}}</view>
					<image :src="currentBatch.qrCodeUrl"></image>
					<view>打开超盟商家APP，扫一扫领取积分</view>
				</view>
				<view class="popup_close" @click="close">
					<image src="../../static/img/ic_cricle_close_white.png"></image>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import { batchlist,codepackagelist } from '../../api/index.js'
	import config from '../../util/config.js'
	import noData from '../../components/data/nodata.vue'
	export default {
		data() {
			return {
				show:false,
				batchList:[],
				currentBatch:{}
			}
		},
		onLoad:function(){
			this.getBatchlist()
		},
		methods: {
			getBatchlist:function(){
				batchlist().then((res) => {
					console.log(res)
					if(res.code == 0){
						this.batchList = res.data;
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
			},
			batchClick:function(item){
				codepackagelist({
					package:item.id
				}).then((res) => {
					console.log(res)
					if(res.code == 0){
						this.currentBatch = res.data;
						this.currentBatch.id = item.id;
						this.currentBatch.qrCodeUrl = config.mengxiaoer.BASE_URL+config.mengxiaoer.RETAIL+config.mengxiaoer.VERSION_CODE+'/jfqrcode?type=5&code='+res.data.code
						this.show = true;
						console.log(this.currentBatch);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
			},
			close:function(){
				this.show = false;
				this.getBatchlist()
			},
			// 时间戳转换器
			timeForMat:function(data){
				if(!!data){
					data = data+'000'
					let nowTime = new Date(parseInt(data));
					let month = nowTime.getMonth()+1;
					let date = nowTime.getDate();
					month>9?month:month='0'+month;
					date>9?date:date='0'+date;
					console.log(nowTime.getFullYear()+'/'+month+'/'+date)
					return nowTime.getFullYear()+'/'+month+'/'+date;
				}else{
					return data;
				}
			}
		},
		components:{
			noData
		}
	}
</script>

<style lang="scss" scoped>
	.gradecode{
		height: 100%;
		background-color: #F5F5F5;
		font-size: $uni-font-size-sm;
		.nodata{
			padding-top: 150rpx;
		}
		.title{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			color: #999999;
			padding: 30rpx;
		}
		.list{
			box-sizing: border-box;
			padding: 0 30rpx;
			padding-top: 90rpx;
			display: flex;
			display: -webkit-flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			.list_item{
				background-color: #FFFFFF;
				box-shadow: 0px 10px 6px rgba(0, 0, 0, 0.06);
				border-radius: 10px;
				width: 47%;
				padding: 30rpx 30rpx 20rpx 30rpx;
				margin-bottom: 30rpx;
				.item_title{
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
					image{
						width: 64rpx;
						height: 64rpx;
					}
				}
				.item_code{
					color: #666666;
				}
				.item_num{
					display: flex;
					justify-content: space-between;
					color: #666666;
					margin: 10rpx 0;
					.redfont{
						margin-left: 10rpx;
					}
				}
			}
		}
		.popup{
			// background-color: #FFFFFF;
			position: absolute;
			top: 400rpx;
			left: 80rpx;
			right: 80rpx;
			font-size: $uni-font-size-base;
			border-radius: 5rpx;
			background-image: url("../../static/img/ic_codebgpic.png");
			background-size: 100% 100%;
			.popup_title{
				// background-color: #007AFF;
				color: #FFFFFF;
				text-align: center;
				padding: 40rpx 0;
				.title_num{
					font-size: $uni-font-size-big;
					font-weight: bold;
				}
			}
			.popup_con{
				text-align: center;
				color: #999999;
				padding: 30rpx 60rpx;
				.popup_conTitle{
					font-size: $uni-font-size-sm;
				}
				image{
					width: 390rpx;
					height: 390rpx;
				}
			}
			.popup_close{
				position: absolute;
				left: 0;
				right: 0;
				text-align: center;
				top: 760rpx;
				image{
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}
</style>
